{% extends 'users/user-base.html' %}

{% load static %}
{% block title %}虚拟机审核{% endblock %}
{% block custom_css %}
    {#    <link href="css/domain.css" rel="stylesheet" title="" type="text/css"/>#}
    <style>
        td{
            vertical-align:middle !important;
        }
    </style>
{% endblock %}

{% block custom_js %}{% endblock %}

{% block contentVMapply %}
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tab").on("click", ":button", function (event) {
                console.log($(this).attr('id'));
                var btn_id = $(this).attr('id');
                var vmid = $(this).closest("tr").find("td").eq(2).text();
                var username = $(this).closest("tr").find("td").eq(1).text();
                var domain_ip = $(this).closest("tr").find("td").eq(7).text();
                console.log(domain_ip);
                if (btn_id == 'apply_vm') {
                    // alert("正在进行资源分配，请稍后");
                    $("#bar-text").text("正在进行资源分配，请稍后");
                    $("#barModal").modal("show");
                    $("#apply_vm").attr("disabled", true);
                    $.ajax({
                        type: "POST",
                        data: {
                            'vm_id': vmid,
                            'username':username,
                            'domain_ip': domain_ip,
                        },
                        url: "/admins/agree_vm/",
                        success: function (data) {
                            if (data["st"] == 1){
                                // alert("正在创建虚拟机，请稍后");
                                $("#bar-text").text("正在创建虚拟机，请稍后");
                                $("#div-bar").width("25%");
                                if(!$("body").hasClass("modal-open")){
                                    $("#barModal").modal("show");
                                }
                                $.ajax({
                                    type: "POST",
                                    data: {
                                        'vm_data': JSON.stringify(data["vm_data"]),
                                        'domain_ip': domain_ip,
                                    },
                                    url: "/admins/agree_install_vm/",
                                    success: function (data) {
                                        if (data["st"] == 1) {
                                            // alert("正在映射端口，请稍后");
                                            $("#bar-text").text("正在自定义虚拟机，请稍后");
                                            $("#div-bar").width("50%");
                                            if(!$("body").hasClass("modal-open")){
                                                $("#barModal").modal("show");
                                            }
                                            $.ajax({
                                                type: "POST",
                                                data: {
                                                    'vm_data': JSON.stringify(data["vm_data"]),
                                                    'domain_ip': domain_ip,
                                                },
                                                url: "/admins/agree_build_vmNAT/",
                                                success: function (data) {
                                                    if(data["st"] == 1){
                                                        // alert("正在自定义虚拟机");
                                                        $("#bar-text").text("正在映射端口，请稍后");
                                                        $("#div-bar").width("75%");
                                                        if(!$("body").hasClass("modal-open")){
                                                            $("#barModal").modal("show");
                                                        }
                                                        $.ajax({
                                                            type: "POST",
                                                            data: {
                                                                'vm_data': JSON.stringify(data["vm_data"]),
                                                                'domain_ip': domain_ip,
                                                            },
                                                            url: "/admins/agree_definit_vm/",
                                                            success: function (data) {
                                                                if(data["st"] == 1){
                                                                    // alert("已同意该虚拟机的申请");
                                                                    $("#bar-text").text("已同意该虚拟机的申请（已完成）");
                                                                    $("#div-bar").width("100%");
                                                                    if(!$("body").hasClass("modal-open")){
                                                                        $("#barModal").modal("show");
                                                                    }
                                                                    $("#btn-bar").bind("click", function(){
                                                                        window.location.reload();
                                                                    })
                                                                }
                                                            },
                                                            error: function () {
                                                                if($("body").hasClass("modal-open")){
                                                                    $("#barModal").modal("hide");
                                                                }
                                                                alert("失败");
                                                                $("#apply_vm").attr("disabled", false);
                                                            }
                                                        })
                                                    }
                                                },
                                                error: function () {
                                                    if($("body").hasClass("modal-open")){
                                                        $("#barModal").modal("hide");
                                                    }
                                                    alert("失败");
                                                    $("#apply_vm").attr("disabled", false);
                                                }
                                            })
                                        } else if (data["st"] === 2) {
                                            if($("body").hasClass("modal-open")){
                                                $("#barModal").modal("hide");
                                            }
                                            alert("失败:不能连接到服务器");
                                            $("#apply_vm").attr("disabled", false);
                                        } else if (data["st"] === 3) {
                                            if($("body").hasClass("modal-open")){
                                                $("#barModal").modal("hide");
                                            }
                                            alert("失败:创建虚拟机失败");
                                            $("#apply_vm").attr("disabled", false);
                                        } else if (data["st"] === 4) {
                                            if($("body").hasClass("modal-open")){
                                                $("#barModal").modal("hide");
                                            }
                                            alert("警告:虚拟机启动失败");
                                            $("#apply_vm").attr("disabled", false);
                                        } 
                                    },
                                    error: function () {
                                        if($("body").hasClass("modal-open")){
                                            $("#barModal").modal("hide");
                                        }
                                        alert("失败");
                                        $("#apply_vm").attr("disabled", false);
                                    }
                                })
                            }else{
                                if($("body").hasClass("modal-open")){
                                    $("#barModal").modal("hide");
                                }
                                alert("失败:服务器资源不足");
                                $("#apply_vm").attr("disabled", false);
                            }
                        },
                        error: function () {
                            if($("body").hasClass("modal-open")){
                                $("#barModal").modal("hide");
                            }
                            alert("失败");
                            $("#apply_vm").attr("disabled", false);
                        }
                    })
                } else if(btn_id == "refuse_vm"){
                    $.ajax({
                        type: "POST",
                        data: {
                            'vm_id': vmid,
                            'domain_ip': domain_ip,
                        },
                        url: "/admins/refuse_vm/",
                        success: function (data) {
                            if (data["st"] === 1) {
                                alert("成功");
                                window.location.reload();
                            }
                        },
                        error: function () {
                            alert("失败");
                        }
                    })
                }
            })
        })

    </script>
        <div class="dashboard-wrapper">
            <div class="dashboard-ecommerce">
                <div class="container-fluid dashboard-content ">
                    <!-- ============================================================== -->
                    <!-- pageheader  -->
                    <!-- ============================================================== -->
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="page-header">
                                <h2 class="pageheader-title">虚拟机审核</h2>
                                <div class="page-breadcrumb">
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item">虚拟机设置</a></li>
                                            <li class="breadcrumb-item active" aria-current="page">虚拟机审核</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- end pageheader  -->
                    <!-- ============================================================== -->

                    <div class="row">
                        <!-- ============================================================== -->
                        <!-- basic table  -->
                        <!-- ============================================================== -->
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered first" id="tab">
                                            <thead>
                                            <tr>
                                                <th >ID</th>
                                                <th >申请用户</th>
                                                <th >VM_ID</th>
                                                <th >操作系统</th>
                                                <th >内存</th>
                                                <th >处理器</th>
                                                <th >磁盘</th>
                                                <th >域网关地址</th>
                                                <th >区域</th>
                                                <th >申请时间</th>
                                                <th >使用时间</th>
                                                <th >部署方式</th>
                                                <th >操作</th>
                                            </tr>
                                            </thead>
                                            <form id="vmapplyform">
                                                {% for apply in data %}
                                                    <tr>
                                                        <td>{{ forloop.counter }}</td>
                                                        <td>{{ apply.username }}</td>
                                                        <td>{{ apply.id }}</td>
                                                        <td>{{ apply.os_version }}</td>
                                                        <td>{{ apply.memory }}G</td>
                                                        <td>{{ apply.cpu_cores }}核</td>
                                                        <td>{{ apply.disk }}G</td>
                                                        <td>{{ apply.gateway_ip }}</td>
                                                        <td>{{ apply.region }}</td>
                                                        <td>{{ apply.apply_time }}</td>
                                                        {% if apply.isPersistent == 1 %}
                                                            <td>长期使用</td>
                                                        {% else %}
                                                            <td>临时使用</td>
                                                        {% endif %}
                                                        <td>{{ apply.installway }}</td>
                                                        {% if apply.state == 0 %}
                                                            <input type="hidden" id="agreevm" name="vm_id"
                                                                   value={{ apply.id }}>
                                                            <td>
                                                                <button type="button" class="btn btn-success" id="apply_vm">
                                                                    <span class="glyphicon glyphicon-ok"></span>
                                                                    同意
                                                                </button>
                                                                <button type="button" class="btn btn-danger" id="refuse_vm">
                                                                    <span class="glyphicon glyphicon-remove"></span>
                                                                    拒绝
                                                                </button>
                                                            </td>
                                                        {% elif apply.state == 1 %}
                                                            <td>
                                                                <button type="button" class="btn btn-info" id="agree">
                                                                    <span class="glyphicon glyphicon-upload"></span>
                                                                    已同意
                                                                </button>
                                                            </td>
                                                        {% else %}
                                                            <td>
                                                                <button type="button" class="btn btn-warning">
                                                                    <span class="glyphicon glyphicon-download"></span>
                                                                    已拒绝
                                                                </button>
                                                            </td>

                                                        {% endif %}
                                                    </tr>
                                                {% endfor %}
                                            </form>
                                        </table>
                                        {% if data.paginator.num_pages > 1%}
                                            <nav aria-label="Page navigation example">
                                                <ul class="pagination pull-right" style="padding-right: 50px;">
                                                    {% if data.number == 1 %}
                                                        <li class="disabled page-item">
                                                            <a aria-label="First" class="page-link">
                                                                <span aria-hidden="true">&laquo;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="page-item">
                                                            <a href="{% url 'admins:apply_vm' 1 %}" aria-label="First" class="page-link">
                                                                <span aria-hidden="true">&laquo;</span>
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                    {% if data.has_previous %}
                                                        <li class="page-item">
                                                            <a href="{% url 'admins:apply_vm' data.previous_page_number %}" aria-label="Previous" class="page-link">
                                                                <span aria-hidden="true">&lt;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="disabled page-item">
                                                            <a aria-label="Previous" class="page-link">
                                                                <span aria-hidden="true">&lt;</span>
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                    {% for num in display_list %}
                                                        {% if data.number == num %}
                                                            <li class="active page-item">
                                                                <a class="page-link">
                                                                    <span aria-hidden="true">{{num}}</span>
                                                                </a>
                                                            </li>
                                                        {% else %}
                                                            <li class="page-item">
                                                                <a href="{% url 'admins:apply_vm' num %}" class="page-link">
                                                                    <span aria-hidden="true">{{num}}</span>
                                                                </a>
                                                            </li>
                                                        {% endif %}
                                                    {% endfor %}
                                                    {% if data.has_next %}
                                                        <li class="page-item">
                                                            <a href="{% url 'admins:apply_vm' data.next_page_number %}" aria-label="Next" class="page-link">
                                                                <span aria-hidden="true">&gt;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="disabled page-item">
                                                            <a aria-label="Next" class="page-link">
                                                                <span aria-hidden="true">&gt;</span>
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                    {% if data.number == data.paginator.num_pages %}
                                                        <li class="disabled page-item">
                                                            <a aria-label="Last" class="page-link">
                                                                <span aria-hidden="true">&raquo;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="page-item">
                                                            <a href="{% url 'admins:apply_vm' data.paginator.num_pages %}" aria-label="Last" class="page-link">
                                                                <span aria-hidden="true">&raquo;</span>
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                    <span class="total" style="line-height: 30px; margin-left: 10px;">
                                                        共有{{data.paginator.count}}条记录
                                                    </span>
                                                </ul>
                                            </nav>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


{% endblock %}